<!--管理员设置-->
<template>
  <!--最外层div-->
    <div class="firstdiv">
      <!--用于修改格式的次外层div-->
         <div class="lastdiv">
           <!--头部div-->
           <div class="left-title">
             <h2>{{pageTitle}}</h2>
           </div>
           <div class="title-line"></div>
           <!--下面的div-->
           <div style="display: flex;" >

             <!--下面的左边-->
              <div style="flex: 1; margin-right: 20px;padding: 20px;overflow: auto;" >
      <tree></tree >
              </div>

             <!--下面的右边-->

             <div style="flex: 2; margin-right: 20px;padding: 20px;">

               <div style="text-align: center;padding-top: 5px;" ><h4>{{sheqvname}}</h4></div>

               <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="auto" label-position="right" style="margin-top: 10px">

                 <el-row   v-for="(domain, index) in dynamicValidateForm.domains"

                           :key="domain.key"
                           :prop="'domains.' + index + '.value'">
                   <el-form-item label="管理员名称"


                   >
                     <el-input  v-model="domain.name" ></el-input> </el-form-item>
                   <el-form-item label="登录密码">
                     <el-input v-model="domain.password"></el-input>
                   </el-form-item>
                   <el-form-item label="管理员名称">
                     <el-input v-model="domain.job"></el-input>
                   </el-form-item>
                   <!--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
                   <el-form-item>
                   <el-button type="danger" icon="el-icon-delete" circle  style="display:block;margin:0 auto" @click.prevent="removeDomain(domain)"></el-button>
                   </el-form-item>
                   <el-form-item style="margin-top: 10px">
                     <el-button type="primary" @click="submitForm('dynamicValidateForm')" style="width: 42%">提交</el-button>
                     <el-button @click="addDomain" style="width: 45%">新增管理员</el-button>

                   </el-form-item>
                 </el-row>

               </el-form>
             </div>
               <!--<div>
                 <div style="text-align: center;padding-top: 5px;" ><h4>{{sheqvname}}</h4></div>
                 <div  class="li1" style="overflow: auto;height: 400px;border: 1px solid black;padding-left: 10px;font-size: 14px;">
                   <div v-for="zh in zhanghao" style="margin: 10px">
                     <div> 组织领导姓名&nbsp<el-input autosize placeholder="例如张三" style="width: 180px;">{{zh.name}}</el-input></div>
                     <div>登录密码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-input autosize placeholder="例如中兴社区党委书记" style="width: 180px;">{{zh.password}}</el-input></div>
                     <div>管理员名称&nbsp&nbsp&nbsp&nbsp<el-input autosize placeholder="139XXXXXXXX" style="width: 180px;">{{zh.username}}</el-input></div>

                     <button @click="shanchu">删除帐号</button>
                   </div>
                 </div>
               </div>-->

               <!--添加领导部分-->
              <!-- <div>

                   <div> 组织领导姓名&nbsp<el-input placeholder="例如张三" style="width: 280px;" >{{add1}}</el-input></div>
                   <div>组织领导职务&nbsp<el-input placeholder="例如中兴社区党委书记" style="width: 280px;">{{add2}}</el-input></div>
                   <div>手机号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-input placeholder="139XXXXXXXX" style="width: 280px;">{{add3}}</el-input></div>

                   <button @click="addlingdao()">增加领导</button>

               </div>-->
             </div>
           </div>
         </div>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    import Tree from './NavBasicManagerment/tree.vue'
    export default {

        name: '',
        components: {
            Tree
        },
        data () {
          return {
            pageTitle: '管理员设置',
            dynamicValidateForm: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: '',
              domains: [{
                name: '',
                password: '',
                job: '',

              }],
              sheqvname: '中兴社区管理员',
              add1: "",
              add2: "",
              add3: "",
              addall: {
                name: '',
                password: '',
                username: ''

              },
              zhanghao: [{
                name: '军长王XX',
                password: '111',
                username: '一件连',
              },
                {
                  name: '军长王XX',
                  password: '111',
                  username: '一件连',
                }
              ],
            }}
          },
            methods:{
              submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
              },
              resetForm(formName) {
                this.$refs[formName].resetFields();
              },
              removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                  this.dynamicValidateForm.domains.splice(index, 1)
                }
              },
              addDomain() {
                this.dynamicValidateForm.domains.push({
                  value: '',
                  key: Date.now()
                });
              }

          /*  /!*删除数据下标1个数*!/
            shanchu(key)
            {
              this.zhanghao.splice(key, 1)
            }
          ,
            /!* 添加zhanghao集合，*!/
            addlingdao()
            {
              addall.name = add1,
                addall.password = add2,
                addall.username = add3,
                zhanghao.add(addall)
            }
          ,*/
          }

    }
</script>
<style lang="postcss" scoped>
  .firstdiv{
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .lastdiv{
    background-color: #fff;
    padding-bottom: 10px;
  }
  .left-title{
    text-align: left;
    padding: 10PX 20PX;
  }
  .title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
</style>
